<template>
  <div>
    <el-table :data="teamUserViewList" style="width: 100%" border :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
      <el-table-column prop="userView.nickName" label="成员名称"></el-table-column>
      <el-table-column prop="userView.avatarUrl" label="成员头像">
        <template slot-scope="scope">
          <el-avatar :src="mediaHost + scope.row.userView.avatarUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="createTimeStr" label="加入时间"></el-table-column>
      <el-table-column align="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            :disabled="hasTeamCreateBy === false"
            @click="kickOut(scope.$index, scope.row)">踢出团队
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--请求标识-->
    <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
      <i  class="el-icon-loading"></i>
    </div>
    <div v-else-if="teamUserViewList.length > 0" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
      <span>--没有更多数据了--</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeamUser",
  data() {
    return{
      mediaHost: this.$global.mediaHost,
      hasTeamCreateBy : this.$global.userBasisInfoView.hasTeamCreateBy,
      loadingFlag:false,
      teamUserViewList: [],
      teamUserPage: {
        lastValue: 0,
        size: 50,
        totalPage: 0,
        hasMore: false,
        page: 1,
        totalCount: 0
      },
      paramsData:{
        page:this.teamUserPage
      }
    }
  },
  methods: {
    /**
     * 此团队的成员
     */
    getTeamUserList: function () {
      this.loadingFlag=true
      this.paramsData.page = this.teamUserPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/user/getTeamUserList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag=false
          this.teamUserViewList = responseData.pageData.data
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 此团队的成员
     */
    kickOut: function (index, row) {
      this.paramsData.currentUserId = row.userView.userId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/user/kickOut',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "你已将改成员移出团队",
            center: true,
            duration: 1000
          });
          this.getTeamUserList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.getTeamUserList()
  }
}
</script>

<style scoped>

</style>
